<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="payList h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="支付订单" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="tabBox flr">
        <view class="tab" :class="{ tabActive: tabName === '' }" @click="tabClick('')">全部</view>
        <view class="tab" :class="{ tabActive: tabName === '1' }" @click="tabClick('1')">待付款</view>
        <view class="tab" :class="{ tabActive: tabName === '2' }" @click="tabClick('2')">已完成</view>
      </view>
      <view class="cardContent oxnone oyauto flex1">
        <view v-for="item in orderList" :key="item.id" class="cardItem mt10">
          <view class="flb">
            <view class="h32 l32 cGY3 f16 bold">{{ item.payTitle }}</view>
            <view class="h32 l32 cYE f16">{{ item.thirdOrderStatus === '1' ? '待支付' : item.thirdOrderStatus === '2' ? '已支付' : '已取消' }}</view>
          </view>
          <view class="flb">
            <view class="h32 l32 cGY3 f16" @click.stop="demandClick">{{ item.payContent || '' }}</view>
            <view class="h32 l32 cGY3 f16">￥{{ item.amount }}</view>
          </view>
          <view class="flb">
            <view class="h32 l32 cGY3 f16">{{ item.createTime }}</view>
            <view class="flr btnBox" v-if="item.thirdOrderStatus === '1'">
              <view class="lb2 f16" @click.stop="payClick(item)">去支付</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
export default {
  mixins: [commonMxins],
  data() {
    return {
      tabName: '',
      orderList: []
    };
  },
  onLoad() {
    this.queryMyPayOrder();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryMyPayOrder() {
      let res = await api.request({ url: '/appUser/queryMyPayOrder', data: { thirdOrderStatus: this.tabName }, method: 'GET' });
      this.orderList = res.data;
    },
    demandClick(item) {
      if (item.demandId) {
        this.jumpToPage(item.demandType === '1' ? `/pages/procurement/detail/index?purchaseInfoId=${item.demandId}` : `/pages/sale/detail/index?saleInfoId=${item.demandId}`);
      }
    },
    tabClick(type) {
      this.tabName = type;
      this.queryMyPayOrder();
    },
    async payClick(item) {
      let res = await api.request({ url: '/wechatPay/wechatPay', data: { orderNo: item.orderNo } });
      wx.requestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success(r) {
          uni.showToast({ title: '充值成功', icon: 'success', duration: 2000 });
          this.queryMyPayOrder();
          this.getUserInfo();
        },
        fail() {
          uni.showToast({ title: '支付失败', icon: 'error', duration: 2000 });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.payList {
  .contentBox {
    .tabBox {
      height: 48rem;
      padding: 12rem 24rem;
      box-sizing: border-box;
      .tab {
        font-size: 16rem;
        color: #a6a6a6;
        line-height: 24rem;
        height: 24rem;
        margin-right: 16rem;
      }
      .tabActive {
        color: #ff7c00;
        border-bottom: 2rem solid #ff7c00;
      }
    }
    .cardContent {
      height: calc(100% - 48rem);
      padding: 0 12rem;
      box-sizing: border-box;
      border-top: 1rem solid #ff7c00;
      border-top-left-radius: 20rem;
      border-top-right-radius: 20rem;
      box-sizing: border-box;
      .cardItem {
        border-radius: 10rem;
        background: #fffbf7;
        padding: 12rem;
        box-sizing: border-box;
        .btnBox {
          height: 32rem;
          padding: 4rem 0;
          box-sizing: border-box;
          .lb1 {
            padding: 4rem 16rem;
            box-sizing: border-box;
            text-align: center;
            border-radius: 3rem;
            background: #cfe5ff;
            color: #2a82e4;
            line-height: 16rem;
            height: 24rem;
          }
          .lb2 {
            padding: 4rem 16rem;
            box-sizing: border-box;
            text-align: center;
            border-radius: 3rem;
            background: #fcead7;
            color: #ff7c00;
            line-height: 16rem;
            height: 24rem;
          }
        }
      }
    }
  }
}
</style>
